<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8" />
	<meta name = "viewport" content = "target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,user-scalable=no" />
	<meta name = "apple-mobile-web-app-capable" content = "yes" />
	<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
	<title>Fresh Note</title>
	<link rel = "stylesheet" href = "../../css/jquery.mobile.css" />
	<link rel = "stylesheet" href = "../../css/function.css" />
	<link rel = "stylesheet" href = "../../css/style.css" />
	<script src = "../../js/jquery.js"></script>
	<script src = "../../js/function.js"></script>
	<script src = "../../js/jquery.mobile.js"></script>
	<!-- My Css -->
	<style>
	</style>
</head>
<body>
<div data-role = "page" class = "bx-page">
	<!--头部栏-->
	<div data-role = "header" class = "bx-header">
		<div class = "ui-btn-left bx-back-btn" data-rel = "back" data-direction = "reverse"></div>
		<h3 class = "bx-logo"></h3>
		<div class = "ui-btn-right bx-set-btn"></div>
	</div>
	<!--主显示区，块状样式-->
	<div class = "bx-detail-main">
		<div class = "bx-detail-round-out bx-fresh-good">
			<div class = "bx-detail-round-loop">
				<p class = "bx-detail-time-sheng">剩</p>
				<p class = "bx-detail-time-ji">05</p>
				<p class = "bx-detail-time-tian"> 天</p>
			</div>
		</div>

		<table class = "bx-detail-info">
			<tr>
				<td>生产日期</td>
				<td>2013/05/01</td>
			</tr>
			<tr>
				<td>保质期</td>
				<td>5天</td>
			</tr>
		</table>

		<div class = "bx-detail-divider"></div>

		<div data-role = "fieldcontain" class = "bx-detail-eat-finish">
			<i>未吃完</i>
			<select class = "bx-detail-eat-finish-tog" name = "toggleswitch1" id = "toggleswitch1" data-theme = "" data-role = "slider">
				<option value = "off"></option>
				<option value = "on"></option>
			</select> <i>吃完了</i>
		</div>

		<div class = "bx-detail-del-food" data-rel = "dialog"><img src = "../../img/food-del-icon.png">删除</div>
	</div>

	<!--隐藏的A元素，用于预加载数据-->
	<a href = "setting.html" data-prefetch class = "f-dn"></a>
	<a href = "delete.html" data-prefetch data-rel = "dialog" class = "f-dn"></a>

	<!--在PAGE内部的执行脚本-->
	<script>
		//点击设置按钮
		$(".bx-set-btn").on("click", function(){
			$.mobile.changePage("setting.html", {transition:"slide", changeHash:true});
		});

		//点击删除按钮
		$(".bx-detail-del-food").on("click", function(){
			$.mobile.changePage("delete.html", {transition:"slidedown", changeHash:true, role:"dialog"});
		});

		//点击返回按钮
		$(".bx-back-btn").on("click", function(){
			window.history.back();
		});
	</script>
</div>
</body>
<!--
Author: Baoxu
Date:   13-4-22
Time:   上午9:59
-->
</html>